@import "../shared/color";
@import "../shared/libs/pace";

@tooltip-bg-color: #001529;

@margin: 10px;

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	outline: none;
}


a.dangerous {
	color: red;
}

//公共样式
.zr-panel {
	overflow: auto;
	position: absolute;
	left: @panel-margin;
	right: @panel-margin;
	top: @panel-margin;
	bottom: @panel-margin;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-direction: column;
	padding-bottom: 10px;
	
	.ant-table-pagination.ant-pagination {
		float: right;
		margin: 16px;
	}
	
	.zr-panel-header {
		width: 100%;
		//padding: 10px;
		
		.ant-breadcrumb {
			padding: 12px 0 0 24px;
		}
		
		.ant-page-header {
			padding: 0 24px 8px;
			
			.ant-page-header-title-view-extra {
				top: 0;
			}
			
			.ant-page-header-back {
				i {
					color: @primary-color;
				}
			}
		}
		
		& > div {
			border-radius: 3px 3px 0 0;
			padding: 1px;
		}
	}
	
	.ld2-query-box {
		width: 100%;
		padding: 16px 30px 16px 20px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		
		&.compact {
			//padding: 16px 60px 16px 20px;
			border-bottom: 1px solid #e4e4e4;
			background: #fff;
		}
		
		.zr-label {
			font-weight: bold;
			color: #2d2d2d;
			text-align: left;
			display: flex;
			align-items: center;
			height: 30px;
			justify-content: flex-end;
			width: 100%;
			padding-right: 6px;
			
			&.r {
				text-align: right;
			}
		}
	}
}

.ld2-content-box {
	background-color: #ffffff;
	border-radius: 4px;
	
	&.absolute {
		position: absolute;
		top: 10px;
		bottom: 10px;
		left: 10px;
		right: 10px;
	}
}

.ld2-content-page {
	&.absolute {
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
	}
}

.important-text {
	color: #ff0000;
	font-weight: bold;
}

//选中菜单样式
.ant-menu-item.ant-menu-item-selected {
	.menu-item {
		& > span {
			color: #ffffff !important;
		}
		
		i {
			color: #ffffff !important;
		}
	}
	
	.zr-menu-icon {
		color: #ffffff !important;
	}
}

.ant-input-lg {
	font-size: 14px;
}

@panel-margin: 0px;


.zr-breadcrumb {
	padding: 8px 20px;
}

.zr-title-h1 {
	text-align: center;
	font-size: 34px;
	margin-bottom: 50px;
	margin-left: 100px;
	padding-top: 30px;
	color: #000;
	font-weight: bold;
}

.ant-tag.ant-tag-has-color.revert {
	color: #000;
}

.ant-tag.weight {
	font-weight: bold;
}


.zr-menu-container .ant-menu-sub.ant-menu-inline > .ant-menu-item,
.zr-menu-container .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-inline .ant-menu-item, .ant-menu-inline .ant-menu-submenu-title, .ant-menu-vertical-left .ant-menu-item,
.ant-menu-vertical-left .ant-menu-submenu-title, .ant-menu-vertical-right .ant-menu-item,
.ant-menu-vertical-right .ant-menu-submenu-title,
.ant-menu-vertical .ant-menu-item, .ant-menu-vertical .ant-menu-submenu-title {
	margin: 1px !important;
}

.ant-modal.app-modal {
	top: 120px;
	left: 140px;
	
	&.collapsed {
		left: 38px;
	}
}

.ant-modal-header {
	border-bottom: none !important;
}

.ant-modal-footer {
	border-top: none !important;
}

.ant-btn.ant-btn-primary.grey {
	text-shadow: none;
	background: #767676;
	border: 1px solid #767676;
	color: #fff;
	box-shadow: none;
	cursor: pointer;
	
	&:hover {
		background: #8c8c8c;
		border: 1px solid #8c8c8c;
	}
	
	&:active {
		background: #676767;
		border: 1px solid #676767;
	}
}


.line-stress {
	color: @primary-color;
	font-weight: bold;
	
	&.red {
		color: @error-color;
	}
	
	&.black {
		color: @black;
	}
}


.loading-box {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.zr-menu-container .ant-menu-dark .ant-menu-inline.ant-menu-sub {
	background-color: #0e0e0e;
}

.ld2-list-page-box {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-direction: column;
	background-color: @body-background;
	border: 1px solid #eaeaea;
	margin: 0 @margin;
	
	.ld2-page-box-header {
		width: 100%;
		padding: 9px 20px;
		font-size: 18px;
		//border-bottom: 1px solid #f5f5f5;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.ld2-action-box {
		width: 100%;
		display: flex;
		padding: 8px 10px 8px 0px;
		justify-content: flex-end;
	}
}

.ant-alert-close-icon .anticon-close {
	cursor: pointer;
}

.ant-alert {
	border-radius: 2px !important;
	font-size: 14px;
}


.zr-menu-container {
	&::-webkit-scrollbar-thumb {
		background-color: #8d8d8d6e;
	}
	
	&::-webkit-scrollbar-track {
		background-color: rgba(200, 200, 200, 0.16);
		border-left: 1px solid #4b4b4b;
	}
}

//滚动条
::-webkit-scrollbar {
	width: 6px !important;
}

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-button {
	height: 0;
	width: 0;
}

::-webkit-scrollbar-thumb {
	background: #bdbdbd;
}

::-webkit-scrollbar-track {
	background-color: #f8f8f8;
	border-left: 1px solid #e6e6e6;
}

//
.ant-select-selection {
	border-radius: 2px !important;
}

.appAppear-appear {
	opacity: 0;
	transform: scale(0);
}

.appAppear-appear.appAppear-appear-active {
	opacity: 1;
	transform: scale(1);
	transition: 500ms ease-out;
}

/*设置进场前透明度为0，放缩为0*/
.fade-enter {
	opacity: 0;
}

/*设置进场过程中 透明度为1，放缩为1，放缩的位置为左上角，持续时间为500ms，时间曲是ease-out */
.fade-enter.fade-enter-active {
	opacity: 1;
	transform-origin: top left;
	transition: 800ms ease-out;
}

/*设置退场前透明度为1，放缩为1*/
.fade-exit {
	opacity: 1;
}

/*设置退场过程中 透明度为0，放缩为0，放缩的位置默认是中间，所以不设置也可以，
持续时间为500ms，时间曲是ease-out */
.fade-exit.fade-exit-active {
	opacity: 0;
	transition: 800ms ease-out;
}

.loading-error {
	font-size: 18px;
}


//全局消息提示
.ant-message {
	position: absolute !important;
}

.ld2-info-page-box {
	position: absolute;
	top: 84px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	flex-direction: row;
	overflow-y: auto;
	flex-wrap: wrap;
	padding-right: 10px;
	background-color: #fff;
	border: 1px solid #e4e4e4;
}

.ant-tag.large {
	font-weight: bold;
	border-radius: 2px;
	padding: 2px 12px;
}

.form-page {
	padding: 40px 20px 20px;
}

.theme-box-bg {
	background-color: #FFFFFF;
}

body {
	//暗色风格定义
	&[data-theme='dark'] {
		
		.has-error .ant-input,
		.has-error .ant-input:hover {
			background-color: rgba(255, 255, 255, 0);
			border-color: #ff4d4f;
		}
		
		.ant-legacy-form,
		.ant-legacy-form-item-label,
		.ant-legacy-form-item-label > label {
			color: rgba(255, 255, 255, 0.85);
		}
		
		.zr-app-home > .right {
			background-color: #252525;
		}
		
		.page-bg {
			background-color: #171717;
		}
		
		.ld2-list-page-box {
			background-color: #141414;
			border: 1px solid #2f2f2f;
		}
		
		.theme-box-border {
			border-color: #2f2f2f;
		}
		
		.theme-box-bg {
			background-color: #141414;
		}
		
		.ant-empty-img-simple-path {
			fill: rgb(38, 38, 38);
			stroke: rgb(67, 67, 67);
		}
		
		.ant-empty-img-simple-ellipse {
			fill: #fff;
			fill-opacity: .08;
		}
		
		.ant-empty-img-simple-g {
			stroke: #434343;
		}
	}
	
	//明亮风格
	&[data-theme='default'] {
		.ant-empty-img-simple-ellipse {
			fill: #f5f5f5;
		}
		
		.ant-empty-img-simple-g {
			stroke: #d9d9d9;
		}
		
		.ant-empty-img-simple-path {
			fill: #fafafa;
		}
	}
}

//滚动条主题
body {
	&[data-theme='dark'] {
		::-webkit-scrollbar-thumb {
			background: #414141;
		}
		
		::-webkit-scrollbar-track {
			background-color: #262626;
			border-left: 1px solid #323232;
		}
	}
	
	&[data-theme='default'] {
		::-webkit-scrollbar-thumb {
			background: #bdbdbd;
		}
		
		::-webkit-scrollbar-track {
			background-color: #f8f8f8;
			border-left: 1px solid #e6e6e6;
		}
	}
}